/* 指定黑夜模式颜色 */
:root {
  --dark-color: #1e1e1e;
  --dark-font-color: #fff;
  --dark-shadow: 0 4px 10px rgba(255, 255, 255, 0.253);
}
body.dark-mode {
  background-color: var(--dark-color);
  color: #fff;
}
body.dark-mode .logo-container:hover {
  box-shadow: var(--dark-shadow);
}
body.dark-mode .logo-text,
body.dark-mode .logo-text:hover {
  color: #fff;
}
body.dark-mode nav {
  background-color: var(--dark-color);
  color: var(--dark-font-color);
  box-shadow: var(--dark-shadow); /* x偏移量, y偏移量, 模糊半径, 阴影颜色 */
  transition: box-shadow 0.3s; /* 添加过渡动画 */
}

body.dark-mode .navbar-toggler-icon,
body.dark-mode .navbar-toggler {
  background-color: var(--dark-font-color);
  color: var(--dark-font-color);
}
body.dark-mode .nav-link {
  color: var(--dark-font-color) !important;
}
body.dark-mode .bright-spot {
  background-color: var(--dark-color);
  color: var(--dark-font-color);
  box-shadow: var(--dark-shadow);
}

body.dark-mode .list-group-item {
  background-color: #1e1e1e;
  color: var(--dark-font-color);
}
body.dark-mode .intro,
body.dark-mode .back-end,
body.dark-mode .front-end {
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  color: var(--dark-color);
  box-shadow: 0 3px 15px rgba(0.3, 0.3, 0.2, 0.35);
  border-radius: 8px;
}

body.dark-mode .card-button,
body.dark-mode .card-button:visited,
body.dark-mode .card-button:active {
  background-color: var(--dark-color);
  color: var(--dark-font-color);
  box-shadow: 0 3px 15px rgba(255, 255, 255, 0.908);
}

body.dark-mode .modal-title,
body.dark-mode .modal-body {
  color: var(--dark-color);
}
body.dark-mode .feature {
  background-color: #dcd9d4;
  background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(0, 0, 0, 0.5) 100%
    ),
    radial-gradient(
      at 50% 0%,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(0, 0, 0, 0.5) 50%
    );
  background-blend-mode: soft-light, screen;
  color: var(--dark-color);
  box-shadow: var(--dark-shadow);
}
body.dark-mode footer {
  background-color: #1e131d;
}
body.dark-mode .fallingDebris {
  --size: 5vw;
  width: var(--size);
  height: var(--size);
  background: url("@/assets/images/snowflake.png") no-repeat;
  background-size: 35% 35%;
  position: fixed;
  top: -5vh;
  z-index: 1;
}
